<template>
	<div id="home">
		<div v-if="!showLoading">
			<Header></Header>
			<!--轮播图-->
			<Sowing :sowing_list="sowing_list"></Sowing>
			<!-- 中间导航 -->
			<Nav :nav_list="nav_list"></Nav>
			<!-- 秒杀 -->
			<FlashSale :flash_sale_product_list="flash_sale_product_list"></FlashSale>
			<!-- 猜你喜欢的 -->
			<YouLike :you_like_product_list="you_like_product_list"></YouLike>
			<!-- 返回顶部 -->
			<MarkPage v-if="showBackStatus" :scrollToTop="scrollToTop"></MarkPage>
		</div>
			<van-loading
			        v-else
			        type="spinner"
			        color="#75a342"
			        style="position: absolute;left:50%;top: 40%;transform: translate(-50%)"
			>
			    正在拼命加载中…
			</van-loading>
	</div>
</template>

<script>
	// 1. 引入
	import {getHomeData} from './../../service/api/index'
	
	// 2. 引入组件
	import Header from './components/header/Header'
	import Sowing from './components/sowing/Sowing'
	import Nav from './components/nav/Nav'
	import FlashSale from './components/flashSale/FlashSale'
	import YouLike from './components/youLike/YouLike'
	import MarkPage from './components/markPage/MarkPage'
	
	// 3. 引入处理返回顶部的函数
	import {showBack, animate} from "@/config/global";
	
	// 4. 引入通知插件
	import PubSub from 'pubsub-js';
	import { Toast } from 'vant';
	
	// 5. 引入vuex
	import {mapMutations, mapState} from 'vuex'
	
	// 6.引入购物车的接口
	import {addGoodsToCart} from './../../service/api/index'
	
	export default {
	    name: "Home",
	    data() {
	        return {
	            // 首页的轮播图数据
	            sowing_list: [],
	            // 导航的数据
	            nav_list: [],
	            // 秒杀数据
	            flash_sale_product_list: [],
	            // 猜你喜欢
	            you_like_product_list: [],
	            // 是否显示加载图标
	            showLoading: true,
	            // 是否显示返回顶部的按钮
	            showBackStatus: false
	        }
	    },
	    created() {
	        // 2. 请求网络数据
	        this.reqData();
	    },
	    computed:{
	      ...mapState(['userInfo'])
	    },
	    mounted(){
	       // 订阅消息（添加到购物车的消息）
	       PubSub.subscribe('homeAddToCart', (msg, goods)=>{
	           if(msg === 'homeAddToCart'){
	               // 判断用户是否登录
	               if(this.userInfo){ // 已经登录
	                   this.dealGoodsAdd(goods)
	               }else { // 没有登录
	                   this.$router.push('/login');
	               }
	
	
	           }
	       });
	    },
	    components: {
	        Header,
	        Sowing,
	        Nav,
	        FlashSale,
	        YouLike,
	        MarkPage
	    },
	    methods: {
	        ...mapMutations(["ADD_GOODS"]),
	        async reqData() {
	            let res = await getHomeData();
	            // console.log(res);
	            if(res.success){
	                this.sowing_list = res.data.list[0].icon_list;
	                this.nav_list = res.data.list[2].icon_list;
	                this.flash_sale_product_list = res.data.list[3].product_list;
	                this.you_like_product_list = res.data.list[12].product_list;
	                // 隐藏加载动画
	                this.showLoading = false;
	                // 开始监听滚动, 到达一定位置就显示返回顶部按钮
	                showBack((status)=>{
	                    // console.log(status);
	                    this.showBackStatus = status;
	                });
	            }
	        },
	        // 1. 滚回顶部
	        scrollToTop() {
	            // 做缓动动画返回顶部
	            let docB = document.documentElement || document.body;
	            animate(docB, {scrollTop: '0'}, 400, 'ease-out');
	        },
	        // 2. 添加商品到购物车
	        async dealGoodsAdd(goods){
	             // 2.1 调用服务器端的接口
	             let result = await addGoodsToCart(this.userInfo.token, goods.id, goods.name, goods.price, goods.small_image,);
	              console.log(result);
	             if(result.success_code === 200){
	                 this.ADD_GOODS({
	                     goodsId: goods.id,
	                     goodsName: goods.name,
	                     smallImage: goods.small_image,
	                     goodsPrice: goods.price
	                 });
	                 // 提示用户
	                 Toast({
	                     message: '添加到购物车成功！',
	                     duration: 800
	                 });
	             }
	        }
	    },
	    beforeDestroy() {
	        PubSub.unsubscribe('homeAddToCart')
	    }
	}
</script>

<style scoped>
	#home{
		width:100%;
		height:100%;
		background-color: transparent;
	}
</style>
